<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Responsive Admin Dashboard Template">
  <meta name="keywords" content="admin,dashboard">
  <meta name="author" content="stacks">
  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap"
        rel="stylesheet">
  <link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
  <link href="../plugins/perfectscroll/perfect-scrollbar.css" rel="stylesheet">
  <link href="../plugins/DataTables/datatables.min.css" rel="stylesheet">
  <!-- Theme Styles -->
  <link href="../css/main.min.css" rel="stylesheet">
  <link href="../css/custom.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- 引入 flatpickr 样式和脚本 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
  <!-- 中文本地化（可选） -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
  <style>
    .register-box-container {
      width: 100%; /* 宽度自适应父容器 */
      max-width: 400px; /* 最大宽度限制，避免宽屏时过宽 */
      margin: 0 auto; /* 水平居中（冗余保障） */
    }
  .register-box-container .form-control,
.register-box-container .form-floating {
width: 100% !important; /* 覆盖可能的固定宽度 */
max-width: 100% !important; /* 避免溢出 */
box-sizing: border-box; /* 确保 padding 不撑开宽度 */
}

    /* 仅作用于 Modal 内的卡片 body */
.modal .card .card-body {
  padding: 25px; /* 增大内边距（比原 15px 增加 10px），给内容留足空间 */
  font-size: 15px; /* 适当增大字体，提升可读性 */
  min-width: 300px; /* 确保最小宽度，避免窄屏挤压 */
}

/* 调整 Modal 内表单元素的间距 */
.modal .card .card-body .mb-3 {
  margin-bottom: 1rem !important; /* 增大表单组之间的间距 */
}

/* 按钮区域增加底部间距 */
.modal .card .card-body .d-grid {
  margin-top: 1.5rem; /* 与上方表单拉开距离 */
}

    /** 登录页面样式 */

    /* 解决溢出问题 */
.card, .card-body {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 让卡片靠左 */
.register-box-containerr .row {
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card {
  margin: 0 !important; /* 取消所有外边距，紧贴父容器左侧 */
  min-width: 280px; /* 避免过小 */
}

/* 优化内部间距，避免内容拥挤 */
.card-body {
  padding: 20px !important; /* 足够的内边距 */
}


    .table-row-selected { background-color: #e3f2fd !important; }
    .table-hover tbody tr:hover { background-color: #f1f8e9; }
    .btn-group .btn { margin-right: 8px; } /* 按钮间距 */
  </style>
</head>
<body>
<div class="page-container">
  <div class="page-header">
    <nav class="navbar navbar-expand-lg d-flex justify-content-between">
      <div class="" id="navbarNav">
        <ul class="navbar-nav" id="leftNav">
          <li class="nav-item"><a class="nav-link" id="sidebar-toggle" href="#"><i
              data-feather="arrow-left"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
        </ul>
      </div>
      <div class="" id="headerNav">
        <ul class="navbar-nav">
          <li class="nav-item dropdown"><a class="nav-link search-dropdown" href="#"
                                           id="searchDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false"><i
              data-feather="search"></i></a>
            <div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu"
                 aria-labelledby="searchDropDown">
              <form>
                <input class="form-control" type="text" placeholder="Type something.."
                       aria-label="Search">
              </form>
              <h6 class="dropdown-header">Recent Searches</h6>
              <a class="dropdown-item" href="#">charts</a> <a class="dropdown-item" href="#">new
              orders</a> <a class="dropdown-item" href="#">file manager</a> <a class="dropdown-item"
                                                                               href="#">new
              users</a></div>
          </li>
          <li class="nav-item dropdown"><a class="nav-link notifications-dropdown" href="#"
                                           id="notificationsDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false">3</a>
            <div class="dropdown-menu dropdown-menu-end notif-drop-menu"
                 aria-labelledby="notificationsDropDown">
              <h6 class="dropdown-header">Notifications</h6>
              <a href="#">
                <div class="header-notif">
                  <div class="notif-image"><span class="notification-badge bg-info text-white"> <i
                      class="fas fa-bullhorn"></i> </span></div>
                  <div class="notif-text">
                    <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                    <small>19:00</small></div>
                </div>
              </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge bg-primary text-white"> <i
                    class="fas fa-bolt"></i> </span></div>
                <div class="notif-text">
                  <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                  <small>18:00</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge bg-success text-white"> <i
                    class="fas fa-at"></i> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge"> <img
                    src="../../assets/images/avatars/profile-image.png" alt=""> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a> <a href="#">
              <div class="header-notif">
                <div class="notif-image"><span class="notification-badge"> <img
                    src="../../assets/images/avatars/profile-image.png" alt=""> </span></div>
                <div class="notif-text">
                  <p>faucibus dolor in commodo lectus mattis</p>
                  <small>yesterday</small></div>
              </div>
            </a></div>
          </li>
          <li class="nav-item dropdown"><a class="nav-link profile-dropdown" href="#"
                                           id="profileDropDown" role="button"
                                           data-bs-toggle="dropdown" aria-expanded="false"><img
              src="../../assets/images/avatars/profile-image.png" alt=""></a>
            <div class="dropdown-menu dropdown-menu-end profile-drop-menu"
                 aria-labelledby="profileDropDown"><a class="dropdown-item" href="#"><i
                data-feather="user"></i>Profile</a> <a class="dropdown-item" href="#"><i
                data-feather="inbox"></i>Messages</a> <a class="dropdown-item" href="#"><i
                data-feather="edit"></i>Activities<span
                class="badge rounded-pill bg-success">12</span></a> <a class="dropdown-item"
                                                                       href="#"><i
                data-feather="check-circle"></i>Tasks</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a> <a
                  class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a> <a
                  class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a></div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="page-sidebar">
    <ul class="list-unstyled accordion-menu">
      <li class="sidebar-title"> Main</li>
      <li><a href="index.html"><i data-feather="home"></i>Dashboard</a></li>

      <li class="sidebar-title"> 商家</li>
      <li><a href="email.html"><i data-feather="inbox"></i>商家管理</a></li>

      <li class="sidebar-title">权限</li>
      <li><a href="alerts.html"><i class="far fa-circle"></i>账号</a></li>
      <li><a href="typography.html"><i class="far fa-circle"></i>角色</a></li>


      <li><a href="#"><i data-feather="check-circle"></i>Documentation</a></li>
    </ul>
  </div>

  <div class="page-content">
    <div class="main-wrapper">
      <div th:replace="${content}"></div>
    </div>
  </div>


</div>
<!-- Javascripts -->
<script src="../plugins/jquery/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="../plugins/perfectscroll/perfect-scrollbar.min.js"></script>
<script src="../plugins/DataTables/datatables.min.js"></script>
<script src="../js/main.min.js"></script>
<script src="../js/pages/datatables.js"></script>

<script language="JavaScript">
  // 初始化日期时间选择器
<!--  flatpickr("#datetime-picker", {-->
<!--    enableTime: true, // 启用时间选择-->
<!--    noCalendar: false, // 显示日历-->
<!--    dateFormat: "Y-m-d H:i:S", // 日期时间格式（年-月-日 时:分）-->
<!--    locale: "zh", // 中文显示-->
<!--    time_24hr: true, // 24小时制-->
<!--    minuteIncrement: 1, // 分钟步长为5分钟-->
<!--    secondIncrement: 1, // 分钟步长为5分钟-->
<!--    minDate: new Date(Date.now() +  1 * 60 * 60 * 1000),-->
<!--    defaultDate: function() {-->
<!--    // 默认选中当前日期的 23:59:59-->
<!--    const now = new Date();-->
<!--    return new Date(-->
<!--      now.getFullYear(),-->
<!--      now.getMonth(),-->
<!--      now.getDate(),-->
<!--      23, 59, 59 // 固定时分秒为 23:59:59-->
<!--    );-->
<!--  },-->
<!--  });-->

  // 当前选中的行数据
    let selectedRow = null;

  function bindSelectRow() {
    document.querySelectorAll(".btn-group .btn").forEach(btn => {
      btn.addEventListener("click", () => {
        const action = btn.getAttribute("data-action"); // 获取按钮动作标识
      const resultEl = document.getElementById("result");
      if (!selectedRow) {
        resultEl.innerHTML = `<span class="text-danger">请先选中一行数据</span>`;
        return;
      }

      const data = selectedRow.data;
      alert(JSON.stringify(data));
      });
    });
	}




  $(document).ready(function() {
  console.log("datatable fetch data begin");
 const token = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTU1NzEyNzE1NyIsInJvbGUiOiJST0xFX0FETUlOIiwic2NvcGUiOiJST0xFX0FETUlOIiwiaXNzIjoib2N0b2NoYW4uY24iLCJ0ZW5hbnRJZCI6MTIzLCJleHAiOjE3NjEyOTg2MDQsImlhdCI6MTc2MTAzOTQwNCwiYXV0aG9yaXRpZXMiOlsiUk9MRV9BRE1JTiJdfQ.YZfWP2p0pvGc3t_cXKewzn9SwsT29l7o-sLAT9sosdIxD2Kv3_b4Hcm9u_UOSLeyIjP-iAbkjjdtZlWAoWwviEMMcMvkPNgpfbGAy5QVl9YpQ3F8BOoiBao8L-_S57CrYv3dnIah4DUo-vlk6yiqra3BH2BY7JnbH9_VAWjpC3PN-rSl79_PunFfMwpLWa0P5TGq8Bv0ggJ-3ToVABBYC2zluXKaMzNrbIbsX8ztOebqeRstheMY0bstnamd8oDq46vwRYGUJg9gDwNCaaMWxotOFJmdYbUhDunjHrrgAvecO6Pk0uS4GcqM26d9LR3qb7hb60PsRMBuuhN4iaAxjQ";
  $('#tenantTable').DataTable({
    // 启用服务端模式
    serverSide: true,
    // 后端接口地址（替换为你的实际接口）
    ajax: {
      url: 'http://localhost:8080/supper/tenant/search',
      type: 'POST',
      contentType: 'application/json',
<!--      headers: {-->
<!--        'Authorization': token ? `Bearer ${token}` : ''-->
<!--      },-->
      data: function(d) {

      console.log("ajax data:", d);
      return JSON.stringify({
        pageNO: Math.floor(d.start / d.length) + 1,
         pageSize: d.length,
            name: d.search.value
          });
      }
    },
    dataSrc: function(response) {
      console.log("ajax response:", response);
      // 假设后端返回格式：{code:200, data: {total: 100, list: [...]}}
      if (response.code === 200) {
      console.log("ajax response:", response);
        return {
<!--          draw: response.data.current || 1,-->
<!--          recordsTotal: response.data.total,       // 总条数-->
<!--          recordsFiltered: response.data.total,    // 过滤后总条数-->
<!--          data: response.data.records || []           // 数据数组（确保为数组）-->
                 draw: 1,
                  recordsTotal: 2,
                  recordsFiltered: 2,
                  data: [ {
            "storeType": 1,
            "name": "name0",
            "mobile": "1857037790",
            "expireAt": "2025-10-22T14:41:00.087226"
        },
        {
            "storeType": 2,
            "name": "name1",
            "mobile": "1857037791",
            "expireAt": "2025-10-22T14:41:00.087226"
        }]
        };
      } else {
        // 错误处理：返回空数据
        return {
          draw: 1,
          recordsTotal: 0,
          recordsFiltered: 0,
          data: []
        };
      }
    },
    // 列定义（与后端返回的字段对应）
    columns: [
      { data: 'name' },       // 对应后端返回的 name 字段
      { data: 'mobile' },
      { data: 'expireAt' },
      { data: 'storeType' }
    ],
    // 分页配置
    pageLength: 10,          // 默认每页10条
    lengthMenu: [5, 10, 20, 50], // 可选每页条数
    pagingType: 'full_numbers',
    language: {

    }
  });
  console.info("ajax....");
  bindSelectRow();

});
</script>

</body>
</html>